<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内容列表_前台游客</title>
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend  style="font-size: small;">前台功能</legend>
</fieldset>
<form class="layui-form" action="" id="searchForm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text" name="title" id="title" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <input type="text" name="type" id="type" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" onclick="doSearch();" class="layui-btn layui-btn-sm">搜索</button>
            <button type="reset" class="layui-btn layui-btn-sm">重置</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="window.location.href='/admin/content/listPage';">进入后台</button>
        </div>
    </div>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
</script>

<script>
    var $, table, layer;
    layui.use(['layer', 'table'], function () {
        table = layui.table;
        $ = layui.jquery;
        layer = layui.layer;
        table.render({
            elem: '#test'
            , url: "/admin/content/look_list"
            , toolbar: '#toolbarDemo'
            , title: '数据表'
            , height: 'full' //高度最大化减去差值
            , totalRow: true
            , parseData: function (res) { //res 即为原始返回的数据
                console.log(res);
                return { //参考response的定义
                    "code": res.code, //解析接口状态
                    "msg": 'ok', //解析提示文本
                    "total": res.msg, //解析数据长度
                    "rows": res.data //解析数据列表
                };
            }
            , cols: [[
                {type: 'numbers', fixed: 'left', rowspan: 2}
                , {field: 'id', title: 'ID', width: 80, hide: true, rowspan: 2, sort: true}
                //,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                , {field: 'title', title: '标题', rowspan: 2}
                , {field: 'type', title: '类型', rowspan: 2}
                , {field: 'source', title: '来源', rowspan: 2}
                , {field: 'username', title: '作者', rowspan: 2}
                , {
                    field: 'status', title: '状态', rowspan: 2, sort: true, templet: function (d) {
                        if (d.status == 0) {
                            return "未发布";
                        } else if (d.status == 1) {
                            return "审核中";
                        } else if (d.status == 2) {
                            return "已发布";
                        } else {
                            return "已回收";
                        }
                    }
                }
                , {field: 'create_time', title: '创建时间', rowspan: 2}
                , {field: 'update_time', title: '更新时间', rowspan: 2}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', rowspan: 2}
            ]]
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 200 //规定成功的状态码，默认：0
                , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                , countName: 'total' //规定数据总数的字段名称，默认：count
                , dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
            , page: true
            , limit: 10
            , limits: [3, 10, 20, 30]
            , id: 'contentTable'
        });



        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log();
            var content_id = obj.data.id; //内容id
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'detail') { //查看
                //弹出编辑页面
                layer.open({
                    type: 2,//2跳转到页面
                    offset: 'auto',
                    title: '文章详情',
                    content: '/admin/content/detailPage?id=' + content_id,
                    area: ['80%', '80%'],
                    btn: '关闭全部',
                    btnAlign: 'c',
                    yes: function () {
//                        parent.layer.closeAll();
                        layer.closeAll();
                    }
                });
            }
        });
    });

    function doSearch() {  //搜索
        //通过jquery获取参数
        var Devmodel = $("#title").val();
        var content_id = $("#type").val();
        console.log(Devmodel);
        //table.reaload方法,附加上搜索条件
        table.reload('contentTable', {
            where: {
                "title": Devmodel,
                "type": content_id
            }, page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }
</script>

</body>
</html>